<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitCode 问题反馈插件 - 完整测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
        }
        
        .test-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .test-card {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            background: #f9f9f9;
            transition: all 0.3s ease;
        }
        
        .test-card:hover {
            border-color: #667eea;
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
        }
        
        .test-card h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3em;
        }
        
        .test-button {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
            margin: 5px;
        }
        
        .test-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        }
        
        .test-button:active {
            transform: translateY(0);
        }
        
        .result {
            margin-top: 15px;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            font-size: 12px;
        }
        
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-success { background: #28a745; }
        .status-error { background: #dc3545; }
        .status-warning { background: #ffc107; }
        .status-info { background: #17a2b8; }
        
        .feature-list {
            list-style: none;
            padding: 0;
        }
        
        .feature-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .feature-list li:last-child {
            border-bottom: none;
        }
        
        .feature-list li::before {
            content: "✅ ";
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔧 GitCode 问题反馈插件</h1>
            <p>完整功能测试与演示</p>
        </div>
        
        <div class="content">
            <!-- 状态检查 -->
            <div class="test-card">
                <h3>📊 系统状态</h3>
                <div id="systemStatus" class="result info">正在检查系统状态...</div>
                <button class="test-button" onclick="checkSystemStatus()">刷新状态</button>
            </div>
            
            <!-- 插件测试 -->
            <div class="test-card">
                <h3>🧪 插件功能测试</h3>
                <button class="test-button" onclick="testPluginLoad()">测试插件加载</button>
                <button class="test-button" onclick="testButtonCreation()">测试按钮创建</button>
                <button class="test-button" onclick="testTextSelection()">测试文本选择</button>
                <button class="test-button" onclick="testURLGeneration()">测试 URL 生成</button>
                <div id="pluginTestResult" class="result" style="display: none;"></div>
            </div>
            
            <!-- 功能演示 -->
            <div class="test-card">
                <h3>🎯 功能演示</h3>
                <p>选择下面的文本，然后点击右下角的"报告问题"按钮：</p>
                <div class="code-block">
// 这是一段示例代码
function demonstrateFeature() {
    console.log("GitCode 问题反馈插件演示");
    return "选择这段文本来测试功能";
}

// 选择这段文本，然后点击"报告问题"按钮
const result = demonstrateFeature();
console.log("结果:", result);
                </div>
            </div>
            
            <!-- 配置信息 -->
            <div class="test-card">
                <h3>⚙️ 配置信息</h3>
                <div class="code-block">
{
    "repo": "nutpi/gitbook-plugin-gitcode-issue-feedback",
    "label": "报告问题",
    "private": false,
    "features": [
        "智能文本选择",
        "精确位置定位",
        "自动 URL 生成",
        "错误处理机制",
        "响应式设计"
    ]
}
                </div>
            </div>
            
            <!-- 功能列表 -->
            <div class="test-card">
                <h3>✨ 功能特性</h3>
                <ul class="feature-list">
                    <li>智能文本选择和定位</li>
                    <li>自动生成问题 URL</li>
                    <li>支持 Markdown 格式</li>
                    <li>响应式按钮设计</li>
                    <li>错误处理和状态提示</li>
                    <li>跨浏览器兼容</li>
                    <li>无需 GitBook 环境</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let testResults = {
            pluginLoaded: false,
            buttonCreated: false,
            textSelection: false,
            urlGeneration: false
        };

        // 工具函数
        function showResult(elementId, message, type = 'info') {
            const resultDiv = document.getElementById(elementId);
            resultDiv.textContent = message;
            resultDiv.className = `result ${type}`;
            resultDiv.style.display = 'block';
        }

        function updateStatusIndicator(status, text) {
            const statusClass = {
                'success': 'status-success',
                'error': 'status-error',
                'warning': 'status-warning',
                'info': 'status-info'
            }[status] || 'status-info';
            
            return `<span class="status-indicator ${statusClass}"></span>${text}`;
        }

        // 系统状态检查
        function checkSystemStatus() {
            const status = [
                updateStatusIndicator('info', `浏览器: ${navigator.userAgent.split(' ')[0]}`),
                updateStatusIndicator('info', `语言: ${navigator.language}`),
                updateStatusIndicator('info', `在线状态: ${navigator.onLine ? '在线' : '离线'}`),
                updateStatusIndicator('info', `页面标题: ${document.title}`),
                updateStatusIndicator('info', `URL: ${window.location.href}`),
                updateStatusIndicator('info', `时间: ${new Date().toLocaleString()}`)
            ].join('\n');
            
            showResult('systemStatus', status, 'info');
        }

        // 插件测试函数
        function testPluginLoad() {
            try {
                if (typeof BugReporter !== 'undefined') {
                    testResults.pluginLoaded = true;
                    showResult('pluginTestResult', '✅ 插件加载成功！\nBugReporter 类可用', 'success');
                } else {
                    testResults.pluginLoaded = false;
                    showResult('pluginTestResult', '❌ 插件加载失败！\nBugReporter 类不可用', 'error');
                }
            } catch (error) {
                testResults.pluginLoaded = false;
                showResult('pluginTestResult', `❌ 插件加载错误：\n${error.message}`, 'error');
            }
        }

        function testButtonCreation() {
            try {
                const button = document.querySelector('.gitbook-plugin-gitcode-issue-feedback');
                if (button) {
                    testResults.buttonCreated = true;
                    showResult('pluginTestResult', '✅ 按钮创建成功！\n按钮已添加到页面', 'success');
                } else {
                    testResults.buttonCreated = false;
                    showResult('pluginTestResult', '❌ 按钮创建失败！\n未找到反馈按钮', 'error');
                }
            } catch (error) {
                testResults.buttonCreated = false;
                showResult('pluginTestResult', `❌ 按钮创建错误：\n${error.message}`, 'error');
            }
        }

        function testTextSelection() {
            try {
                const selection = window.getSelection();
                const selectedText = selection ? selection.toString() : '';
                
                if (selectedText.trim()) {
                    testResults.textSelection = true;
                    showResult('pluginTestResult', `✅ 文本选择成功！\n选中的文本：\n"${selectedText}"`, 'success');
                } else {
                    testResults.textSelection = false;
                    showResult('pluginTestResult', 'ℹ️ 请先选择一些文本\n然后再次点击此按钮', 'info');
                }
            } catch (error) {
                testResults.textSelection = false;
                showResult('pluginTestResult', `❌ 文本选择错误：\n${error.message}`, 'error');
            }
        }

        function testURLGeneration() {
            try {
                const config = {
                    repo: 'nutpi/gitbook-plugin-gitcode-issue-feedback',
                    label: '报告问题',
                    private: false
                };
                
                const baseUrl = `https://gitcode.com/${config.repo}/issues/new`;
                const params = new URLSearchParams();
                params.append('labels', config.label);
                params.append('title', '测试问题标题');
                params.append('body', '这是一个测试问题的内容');
                
                const fullUrl = `${baseUrl}?${params.toString()}`;
                
                testResults.urlGeneration = true;
                showResult('pluginTestResult', `✅ URL 生成成功！\n生成的 URL：\n${fullUrl}`, 'success');
            } catch (error) {
                testResults.urlGeneration = false;
                showResult('pluginTestResult', `❌ URL 生成错误：\n${error.message}`, 'error');
            }
        }

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 完整测试页面已加载');
            checkSystemStatus();
            
            // 等待插件加载
            setTimeout(() => {
                testPluginLoad();
                testButtonCreation();
            }, 1000);
        });

        // 监听页面完全加载
        window.addEventListener('load', function() {
            console.log('📄 页面完全加载完成');
        });
    </script>

    <!-- 加载简化版插件 -->
    <script src="plugin-simple.js"></script>
</body>
</html>